@import (reference) 'config';

w-change-language {
  w-select {
    width: 142px;
    height: 36px;

    .select {
      .title {
        border: 1px solid transparent;
      }

      .select-list {
        max-height: 171px;
        overflow: auto;
      }
    }

    .lng-item {
      text-transform: capitalize;
      font-size: @font-size-control-small;
      white-space: nowrap;
      width: 100%;

      span {
        display: inline-block;
        min-width: 18px;
      }

      &::before {
        content: '';
        width: 18px;
        height: 18px;
        display: inline-block;
        margin-right: 6px;
        vertical-align: top;
        background-position: center center;
      }
    }

    .lng-ru::before {
      background: url(/img/icons/flags/ru.svg) no-repeat center;
    }

    .lng-en::before {
      background: url(/img/icons/flags/en.svg) no-repeat center;
    }

    .lng-ko::before {
      background: url(/img/icons/flags/ko.svg) no-repeat center;
    }

    .lng-tr::before {
      background: url(/img/icons/flags/tr.svg) no-repeat center;
    }

    .lng-zh_CN::before {
      background: url(/img/icons/flags/zh-Hans-CN.svg) no-repeat center;
    }

    .lng-ja::before,
    .lng-ja-JP::before {
      background: url(/img/icons/flags/jp.svg) no-repeat center;
    }

    .lng-nl::before,
    .lng-nl_NL::before {
      background: url(/img/icons/flags/nl.svg) no-repeat center;
    }

    .lng-hi_IN::before {
      background: url(/img/icons/flags/hi.svg) no-repeat center;
    }

    .lng-es::before {
      background: url(/img/icons/flags/es.svg) no-repeat center;
    }

    .lng-pt_BR::before {
      background: url(/img/icons/flags/br.svg) no-repeat center;
    }

    .lng-pl::before {
      background: url(/img/icons/flags/pl.svg) no-repeat center;
    }

    .lng-de::before {
      background: url(/img/icons/flags/de.svg) no-repeat center;
    }

    .lng-et_EE::before {
      background: url(/img/icons/flags/est.svg) no-repeat center;
    }

    .lng-fr::before {
      background: url(/img/icons/flags/fr.svg) no-repeat center;
    }

    .lng-id::before {
      background: url(/img/icons/flags/id.svg) no-repeat center;
    }

    .lng-it::before {
      background: url(/img/icons/flags/it.svg) no-repeat center;
    }
  }
}

.footer {
  w-change-language {
    w-select {
      width: 200px;
      position: relative;
      -moz-appearance: none;
      -webkit-appearance: none;
      font-size: 15px;
      padding: 0;
      right: 0;
      top: 0;

      .select {
        background: @color-basic-900;
        line-height: 40px;
        height: 40px;
        color: @color-white;

        &.expanded .title {
          border: 1px solid @color-basic-700;
          border-top: 0 none;
          border-radius: 0;

          &::after {
            transition: .5s;
            transform: translateY(-50%) rotate(180deg);
          }
        }

        .select-list {
          background: @color-basic-900;
          border-radius: 4px 4px 0 0;
          transform: translateY(-100%);
          margin-top: -39px;
          flex-direction: column-reverse;
          border: 1px solid @color-basic-700;
          border-bottom: 0 none;
          box-shadow: none;

          w-option.active {
            display: none;
          }

          .option {
            transition: .3s;
            padding: 0 15px;
            color: @color-white;

            &:hover {
              background: @color-basic-700;
            }
          }
        }

        .title {
          border: 1px solid @color-basic-700;
          border-radius: 2px;
          background: none transparent;
          padding: 0 15px;
          color: @color-white;
        }
      }

      .lng-item {
        display: flex;
        align-items: center;
        font-size: @font-size-control;

        &::before {
          margin-right: 10px;
        }
      }
    }
  }
}
